{%- assign faqs = linklists[section.settings.faq_menu] -%}
{%- assign stay_open_accordion = false -%}
{%- if faqs -%}
<faq-list data-section-id="{{ section.id }}">
  <div class="as-anchor position-absolute mt-nsection"></div>
  <div class="container my-section">
    <div class="row">
      <div class="col-12 col-md-4">
        <div class="accordion me-lg-7">

          <div class="faq-menu accordion-item py-2 py-lg-0 {% if section.settings.style == "vertical-lines" %}vertical-lines {% endif %}">
            <div class="accordion-header d-md-none" id="accordion-nav-heading-{{ section.id }}">
              {%- for faq_category in faqs.links limit: 1 -%}
              <button class="as-accordion-button accordion-button px-3 px-md-4 py-2 py-md-3 fw-bold collapsed" 
                type="button" 
                data-bs-toggle="collapse" 
                data-bs-target=".as-accordion-nav-{{ section.id }}" 
                aria-expanded="true"
                
                aria-controls="as-accordion-nav-{{ section.id }}">{{ faq_category.title }}</button>
              {%- endfor -%}
            </div>
            {%- comment -%}mob{%- endcomment -%}
            <div class="accordion-collapse collapse as-collapse as-accordion-nav-{{ section.id }} d-md-none" 
            aria-labelledby="accordion-nav-heading-{{ section.id }}">
            <div class="accordion-body p-0">
              <ul class="as-nav nav flex-column as-nav-mob">
                {%- for faq_category in faqs.links -%}
                  <li class="as-nav-item nav-item px-0">
                    <a href="#{{ faq_category.object.handle }}" 
                      id="as-link-{{ section.id }}-mob-{{ faq_category.object.handle }}-{{ forloop.index0 }}"
                      class="as-nav-link nav-link px-3 px-md-4 py-2{% if forloop.first %} active{% endif %}" 
                      data-bs-toggle="pill" 
                      role=""
                      data-bs-target="#as-{{ section.id }}-{{ forloop.index0 }}-{{ faq_category.object.handle }}" 
                      data-text="{{ faq_category.title }}"
                      aria-controls="as-{{ section.id }}-{{ forloop.index0 }}-{{ faq_category.object.handle }}" 
                      {% if forloop.first %}aria-current="true"{% endif %}>
                      {{ faq_category.title }}
                    </a>
                  </li>
                {%- endfor -%}
              </ul>
            </div>
            </div> 

            {%- comment -%}pc{%- endcomment -%}
            <div class="accordion-collapse collapse d-none d-md-block" 
            aria-labelledby="accordion-nav-heading-{{ section.id }}">
            <div class="accordion-body p-0">
              <ul class="as-nav nav flex-column as-nav-pc">
                {%- for faq_category in faqs.links -%}
                  <li class="as-nav-item nav-item px-0 col-12">
                    <a href="#{{ faq_category.object.handle }}" 
                      id="as-link-{{ section.id }}-pc-{{ faq_category.object.handle }}-{{ forloop.index0 }}"
                      class="as-nav-link nav-link px-3 px-md-4 p-0 pb-3{% if forloop.first %} active{% endif %}" 
                      data-bs-toggle="pill" 
                      role=""
                      data-bs-target="#as-{{ section.id }}-{{ forloop.index0 }}-{{ faq_category.object.handle }}" 
                      data-text="{{ faq_category.title }}"
                      aria-controls="as-{{ section.id }}-{{ forloop.index0 }}-{{ faq_category.object.handle }}" 
                      {% if forloop.first %}aria-current="true"{% endif %}>
                      {{ faq_category.title }}
                    </a>
                  </li>
                {%- endfor -%}
              </ul>
            </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-8">
        <div class="tab-content ms-md-2 ms-lg-0 mt-md-0 mt-5 h-100">
          {%- for faq_category in faqs.links -%}
            {%- assign outer_index = forloop.index0 -%}
            {%- assign faq_blog_posts = blogs[faq_category.handle] -%}
            <div class="as-tab-pane tab-pane position-relative h-100 fade{% if forloop.first %} show active{% endif %}" 
              id="as-{{ section.id }}-{{ forloop.index0 }}-{{ faq_category.handle }}" 
              role="tabpanel" 
              aria-labelledby="{{ faq_category.handle }}">
              <div class="as-content">
                {%- paginate faq_blog_posts.articles by 10 -%}
                  <div class="d-flex flex-column h-100">
                    <div class="w-100 flex-grow-1">
                      <h2 class="faq-category-title d-none d-md-block">{{ faq_category.title }}</h2>
                      <div class="accordion accordion-flush border-bottom" {% if stay_open_accordion %}id="as-accordion-{{ section.id }}-{{ faq_category.handle }}-{{ outer_index }}"{% endif %}>
                        {%- for article in faq_blog_posts.articles -%}
                          <div class="accordion-item">
                            <div class="accordion-header" id="accordion-{{ section.id }}-{{ article.title | truncatewords: 2 | handleize }}-{{ forloop.index0 }}">
                              <button class="accordion-button collapsed px-0 py-md-3 py-lg-4" 
                                type="button" 
                                data-bs-toggle="collapse" 
                                data-bs-target="#as-accordion-collapse-{{ section.id }}-{{ article.title | truncatewords: 2 | handleize }}-{{ forloop.index0 }}" 
                                aria-expanded="false" 
                                aria-controls="as-accordion-collapse-{{ section.id }}-{{ article.title | truncatewords: 2 | handleize }}-{{ forloop.index0 }}">
                                <span class="pe-4">{{ article.title }}</span>
                              </button>
                            </div>
                            <div id="as-accordion-collapse-{{ section.id }}-{{ article.title | truncatewords: 2 | handleize }}-{{ forloop.index0 }}" 
                              class="accordion-collapse collapse" 
                              aria-labelledby="accordion-{{ section.id }}-{{ article.title | truncatewords: 2 | handleize }}-{{ forloop.index0 }}" 
                              {% if stay_open_accordion %}data-bs-parent="#as-accordion-{{ section.id }}-{{ faq_category.handle }}-{{ outer_index }}"{% endif %}>
                              <div class="richtext-description accordion-body px-0 text-muted pt-0 pb-3 pb-lg-4">{{ article.content }}</div>
                            </div>
                          </div>
                        {%- endfor -%}
                      </div>
                    </div>
      
                    {%- if paginate.pages > 1 -%}
                      <div class="mt-6 w-100">
                        {%- assign anchor = '#' | append: faq_category.handle -%}
                        {%- render 'pagination', paginate: paginate, anchor: anchor -%}
                      </div>
                    {%- endif -%}
                  </div>
                {%- endpaginate -%}
              </div>
            </div>
          {%- endfor -%}
        </div>
      </div>
    </div>
  </div>
</faq-list>
{%- endif -%}



{% schema %}
  {
    "name": "FAQ List",
    "class": "faq-list",
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "default": "Browse by topic",
        "label": "Heading"
      },
      {
        "type": "select",
        "id": "style",
        "label": "Style",
        "options": [
          {
            "value": "vertical-lines",
            "label": "Vertical lines"
          },
          {
            "value": "wireframe",
            "label": "Wireframe"
          }
        ],
        "default": "wireframe"
      },
      {
        "type": "link_list",
        "id": "faq_menu",
        "label": "FAQ menu"
      }
    ],
    "presets": [
      {
        "name": "FAQ List"
      }
    ]
  }
{% endschema %}